<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@include file="../common/header.jsp"%>
<html>
<head>
    <%@include file="../common/footer.jsp"%>
    <script src="../../../statics/test/js/echarts.js"></script>
    <script src="../../../statics/test/js/aa/echarts.min.js"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <!-- Begin of toolbar -->
    <div id="wu-toolbar">
        <div class="wu-toolbar-button">
            <%@include file="../common/menus.jsp"%>
        </div>
    </div>
    <!-- End of toolbar -->
    <div class="easyui-accordion" style="width:960px;height:600px;">
        <div title="营业统计分析" iconCls="icon-chart-curve" style="overflow:auto;padding:10px;">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="charts-div" style="width: 800px;height:600px;"></div>
        </div>
    </div>
</div>
<!-- Begin of easyui-dialog -->


<!-- End of easyui-dialog -->
<script type="text/javascript">
    $(document).ready(function(){
        statsByDay();
    });
    function statsByMonth(){
        getData('month');
    }
    function statsByDay(){
        getData('day');
    }
    function getData(type) {
        alert(type);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('charts-div'));
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']

            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    interval: 0 //全部显示x轴
                },
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            },{
                name: '年度',
                type: 'bar',
                data: []
            }
            ],

        });
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var names = [];    //类别数组（实际用来盛放X轴坐标值）
        var nums = [];    //销量数组（实际用来盛放Y坐标值）
        $.ajax({

            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/admin/stats/get_stats",    //请求发送到TestServlet处
            data: {type:type},
            dataType: "json",        //返回数据形式为json
            success: function (datas) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                var a = datas.data;
                var b = JSON.parse(a);
                console.log(b[0].price)
                if (b) {
                    for (var i = 0; i < b.length; i++) {
                        names.push(b[i].createTime + '月份');    //挨个取出类别并填入类别数组
                    }
                    console.log(names)

                    for (var i = 0; i < b.length; i++) {
                        nums.push(b[i].price);    //挨个取出销量并填入销量数组
                    }
                    console.log(nums)
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '销量',
                            data: nums
                        }]
                    });

                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
    }




</script>
</body>
</html>